<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link href="../../project/css/bootstrap.css" rel="stylesheet" media="screen">
    <link href="css/font-awesome.css" rel="stylesheet">
    <title></title>
    <style>
        .ul-question {
            /*border: 1px solid #000000;*/
            float: left;
            width: 35%;
            height: 35%;
        }

        .ul-spacer {
            /*border: 1px solid #000000;*/
            width: 30%;
            height: 35%;
            float: left;
        }

        .ul-answer {
            /*border: 1px solid #000000;*/
            float: left;
            width: 35%;
            height: 35%;
        }

        .li-question-answer-id {
            width: 10%;
            height: 90%;
            font-size: 16px;
            font-weight: bold;
            left: 0;
            text-align: center;
            float: left;
            background-color: #bcbcd7;
        }

        .li-class {
            margin-bottom: 40px;
            width: 100%;
            height: 100%;
            padding: 3px;
            float: left;
            /*border: solid 1px red;*/
        }

        .li-question-answer-text {
            width: 90%;
            height: 90%;
            overflow-y: auto;
            border-left: 1px solid #dfe4e8;
            padding: 5px;
            background: #7fbbda;
            font-size: 14px;
            float: left;
        }

        hr {
            height: 30px;
            width: 95%;
            border-style: solid;
            border-color: black;
            border-width: 1px 0 0 0;
            border-radius: 20px;
            margin-top: 25%;
        }

        hr:before {
            display: block;
            content: "";
            height: 30px;
            margin-top: -31px;
            border-style: solid;
            border-color: black;
            border-width: 0 0 1px 0;
            border-radius: 20px;
        }

        .correct {
            border: solid 2px green;
        }

        .incorrect {
            border: solid 2px red;
        }

        .correct-id {
            border: solid 2px green;
            background-color: green;
        }

        .incorrect-id {
            border: solid 2px red;
            background-color: red;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="container-fluid"><!--  -->
        <p id="p">
            Match each letter with the correct answer:
        </p>

        <div class="container-fluid" style="width: 100%; height: 500px; overflow-y: scroll">
            <ul class="ul-question list-unstyled">

            </ul>
            <ul class="ul-spacer list-unstyled">

            </ul>
            <ul class="ul-answer list-unstyled">

            </ul>
        </div>
        <button class="btn btn-success" onclick="check_answer()">Check answer</button>
    </div>
</div>
</body>

<script src="../../project/js/jquery-1.10.2.js"></script>
<script src="../../project/js/jquery-ui.js"></script>
<script src="../../project/js/bootstrap.js"></script>
<script>
    $(document).ready(function () {
        create_matches();
        $('.ul-answer').sortable().disableSelection();
    });
    var question = ['Match 1', 'Match 2', 'Match 3'];
    var answer = ['Match 1 answer', 'Match 2 answer', 'Match 3 answer'];
    //Базадан алынған мәліметтер бойынша сұрақ-жауап құратын функция
    function create_matches() {
        var answer_mix_id = set_random_int(answer.length);
        for (var i = 0; i < question.length; i++) {
            $('.ul-question').append('<li class="li-class">' + '<div class="li-question-answer-id">' + String.fromCharCode(65 + i) + '</div>' +
            '<div class="li-question-answer-text"><p>' + question[i] + '</p></div></li>');
            $('.ul-spacer').append("<li class='li-class'><hr align='center'></li>");
            $('.ul-answer').append('<li class="li-class">' + '<div class="li-question-answer-id" id="answer-id">' + (i + 1) + '</div>' +
            '<div class="li-question-answer-text" id="answer-text"><p>' + answer[answer_mix_id[i]] + '</p></div></li>');
        }
    }
    //Сұрақ жауаптарын тексеретін функция
    function check_answer() {
        console.log("I am checked");
        $('.ul-answer .li-class').each(function (i, text) {
            console.log($(text).find('.li-question-answer-text').text());
            if (answer[i] == $(text).find('.li-question-answer-text').text()) {
                $(text).find('.li-question-answer-text').addClass('correct');
                $(text).find('.li-question-answer-id').addClass('correct-id');
            } else{
                $(text).find('.li-question-answer-text').addClass('incorrect');
                $(text).find('.li-question-answer-id').addClass('incorrect-id');
            }
        });
    }
    //Сұрақ жауаптарын рандомлы араластырып қоятын функция
    function set_random_int(length_of_answer) {
        var array = [];
        array[0] = get_random();
        for (var i = 1; i < length_of_answer; i++) {
            a = get_random();
            if (!dont_have(a, array)) {
                array.push(a);
            } else
                i--;
        }
        function get_random() {
            return Math.floor(Math.random() * length_of_answer);
        }

        function dont_have(a, array) {
            var have = false;
            for (var i = 0; i < array.length; i++) {
                if (a == array[i]) {
                    have = true;
                }
            }
            return have;
        }

        return array;
    }
</script>
</html>